@use "sass:color";
/*---------------------------------------------------------
Project: CLab - Responsive Multi-purpose Template
version: 1.0
Author: VectorLab
Web: http://thevectorlab.net
-----------------------------------------------------------

/*------------------------------------
Table of Contents
--------------------------------------
01. type
02. header
03. overlay nav
04. footer
05. components
06. bs reset
07. utilities

------------------------------------*/

@import "variables";

/*------------------------------------
type
------------------------------------*/
@import "type";

/*------------------------------------
header
------------------------------------*/
@import "header";

/*------------------------------------
overlay nav
------------------------------------*/
@import "overlay-nav";

/*------------------------------------
footer
------------------------------------*/
@import "footer";

/*------------------------------------
prism dark theme
------------------------------------*/
@import "prism-dark";

/*------------------------------------
Components
------------------------------------*/
@import "components/hero-banner";
@import "components/buttons";
@import "components/accordion";
@import "components/blurb";
@import "components/list-group";
@import "components/carousel";
@import "components/card";
@import "components/form";
@import "components/steps";
@import "components/block-img";
@import "components/progress-bar";
@import "components/tabs";
@import "components/table";
@import "components/team";
@import "components/typed";
@import "components/countdown";
@import "components/portfolio";
@import "components/twitter";
@import "components/floating-kit";
@import "components/blog";
@import "components/shop";
@import "components/sidebar";
@import "components/navbar";
@import "components/nav";

/*------------------------------------
bs reset
------------------------------------*/
@import "bs-reset";

/*------------------------------------
utilities
------------------------------------*/
@import "utilities";

/*------------------------------------
body
------------------------------------*/
html body {
  background-color: $white;

  @media screen and (prefers-color-scheme: dark) {
    background-color: $dark-mode-bg;
    color: $dark-mode-fg;
  }
}

/* This should prevent the background scrolling when opening a modal
 */
body.modal-open {
  overflow: hidden;
}

/*------------------------------------
Reports
------------------------------------*/
.report-view-box {
  height: 80vh;
  white-space: pre-wrap;
  overflow: hidden;
  cursor: default;

  & > div {
    overflow: auto;
    height: 100%;
    max-width: 1035px;
    margin: auto;
  }
  .split-view-container {
    display: flex;
    overflow: hidden;

    .solidity-coverage-container {
      display: flex;
      flex-direction: column;
      flex-grow: 0;
      width: 100%;
      min-width: 0;

      .solidity-coverage {
        height: 100%;
        overflow: auto;
      }
      .message-box {
        height: 25%;

        @media screen and (prefers-color-scheme: dark) {
          table.table-light {
            background-color: $dark-mode-bg;
            color: $dark-mode-fg;
          }
        }
      }
    }
    .bytecode-coverage {
      max-width: 25%;
      overflow: auto;
    }
    .contract-explorer {
      width: 25%;
      overflow: auto;
      padding: 8px 0;
      font-size: 0.9rem;
      background-color: #fcfcfc;
      & > ul > li {
        padding: 4px 8px;
        cursor: pointer;
        transition: 0.3s background;
        &:hover {
          background: #ddd;
        }
        &.active {
          background: #8ed3f1; // #1a98cd;
        }

        &:first-child {
          font-size: 1rem;
        }
        &:not(:first-child) {
          margin-left: 0.75rem;
          border-left: 1px solid #ccc;
        }
      }

      @media screen and (prefers-color-scheme: dark) {
        background-color: $dark-mode-bg;
        color: $dark-mode-fg;

        & > ul > li {
          &.active {
            background: $rv-blue; // #1a98cd;
          }
        }
      }
    }
    tr {
      border-bottom: 2px solid transparent;

      &:hover {
        cursor: pointer;
      }
      &.covered:hover {
        border-bottom: 2px solid
          color.scale($green, $lightness: -25%, $saturation: -50%);
      }
      &.weak-covered:hover {
        border-bottom: 2px solid
          color.scale($yellow, $lightness: -25%, $saturation: -50%);
      }
      &.not-covered:hover {
        border-bottom: 2px solid
          color.scale($red, $lightness: -25%, $saturation: -50%);
      }
      &.active {
        filter: brightness(85%);
      }
      &.covered.active {
        border-bottom: 2px solid
          color.scale($green, $lightness: -25%, $saturation: -50%);
      }
      &.weak-covered.active {
        border-bottom: 2px solid
          color.scale($yellow, $lightness: -25%, $saturation: -50%);
      }
      &.not-covered.active {
        border-bottom: 2px solid
          color.scale($red, $lightness: -25%, $saturation: -50%);
      }
    }
    .has-highlight {
      tr {
        &.text-muted {
          &.not-covered,
          &.covered,
          &.weak-covered,
          tr,
          td {
            background-color: inherit !important;
          }
        }
        &.message-muted {
          display: none;
        }
      }
    }
  }
}

.benefits {
  padding-bottom: 48px;
}

.has-highlighted > table {
  tr:not(.highlighted) * {
    color: $gray !important;
    background-color: inherit !important;
  }
}

pre[class*="language-"] {
  background-color: inherit;
  padding: 0;
}

.coverage {
  font-size: 14px;
  overflow: auto;
  height: 100%;

  &:not(.solidity-coverage) {
    font-size: 13px;
  }
  tr {
    td,
    th {
      border-radius: 0 !important;
      padding: 0 0 0 1em;
      border: 0;
      white-space: nowrap;

      pre {
        margin: 0;
        padding: 0;
        background: inherit;
      }
    }
    th {
      font-size: 16px;
      border-bottom: 1px solid #dfdfdf;
    }
    td.index,
    th.index {
      text-align: right;
      border-right: 1px solid $gray;
      padding-right: 1ch;
      width: 3em;
    }
    td.index {
      background-color: $background;
    }
    td.opcode {
      font-weight: 600;
    }
    td.hit-count {
      text-align: center;
    }
  }
  tr.covered {
    background-color: $green;
    td {
      background-color: $green;
    }
    td.index {
      background-color: $dark-green;
    }
  }
  tr.not-covered {
    background-color: $red;
    td {
      background-color: $red;
    }
    td.index {
      background-color: $dark-red;
    }
  }
  tr.weak-covered {
    background-color: $yellow;
    td {
      background-color: $yellow;
    }
    td.index {
      background-color: $dark-yellow;
    }
  }

  @media screen and (prefers-color-scheme: dark) {
    color: $dark-mode-gray;

    th {
      color: $dark-mode-fg;
    }

    tr.not-covered,
    tr.covered {
      td.index {
        color: $dark-mode-gray;
      }
    }

    tr {
      th.index {
        border-color: $dark-mode-border-color;
      }
      td.index {
        background-color: $dark-mode-bg;
        border-color: $dark-mode-border-color;
      }

      td.opcode {
        color: $dark-mode-gray;
      }
    }

    tr.covered {
      background-color: $dark-mode-green;
      td {
        background-color: $dark-mode-green;
      }
      td.index {
        background-color: $dark-mode-dark-green;
      }
    }
    tr.not-covered {
      background-color: $dark-mode-red;
      td {
        background-color: $dark-mode-red;
      }
      td.index {
        background-color: $dark-mode-dark-red;
      }
    }
    tr.weak-covered {
      background-color: $dark-mode-yellow;
      td {
        background-color: $dark-mode-yellow;
      }
      td.index {
        background-color: $dark-mode-dark-yellow;
      }
    }
  }
}

.coverage table {
  width: 100%;
}

.mouse-pointer {
  cursor: pointer;
}

.wizard-grid {
  div {
    padding: 10px;
  }

  .btn-outline {
    margin-left: 0px;
  }
}

.wizard-box {
  .btn-outline {
    margin-left: 0px;
  }
}

a.wizard-link:visited {
  color: purple;
}

.code {
  background-color: $background;
  padding: 10px;

  @media screen and (prefers-color-scheme: dark) {
    background-color: $dark-mode-canvas-color;
    color: $dark-mode-fg;
  }
}

.code-block-selectors {
  padding: 2px 12px;
  background-color: #e5e5e5;
  color: $dark-mode-bg;
  border-radius: 4px;
  margin-bottom: 8px;
  width: fit-content;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (prefers-color-scheme: dark) {
  .code-block-selectors {
    background-color: $gray-darker;
    color: $dark-mode-fg;
  }
}

.nav-item {
  cursor: pointer;
}

// Newsletter
.ns-form {
  display: grid;
  grid-template-columns: 75% 25%;
  grid-column-gap: 1rem;
}

.btn-disabled {
  border: 2px solid $gray-light;
  background: $white;
  color: gray !important;
  margin-left: 2em;
}

#firefly-reports,
#firefly-report {
  margin-bottom: 100px;
  thead {
    tr th {
      padding: 0.5rem 0.75rem;
      text-align: center;
    }
  }
  tbody .report-row-header td {
    text-align: center;

    .report-id {
      color: $rv-blue;
      text-decoration: underline;

      &:hover {
        color: darken($rv-blue, 8);
      }
    }
  }
  .center-image {
    padding-bottom: 0px;
    padding-left: 21px;
    padding-right: 21px;
  }
}

.report-buttons > ul {
  margin: 0;
  display: flex;
  align-items: center;

  & > li {
    p {
      margin: 0;
    }
    &:not(:last-child) {
      margin-right: 1.5rem;
    }
  }
  .dropdown {
    display: inline-block;

    &.show {
      outline: 2px solid $rv-blue;
    }
    img {
      height: 2rem;

      &:hover {
        outline: 1px solid $rv-blue;
      }
    }
  }
  .dropdown-toggle::after {
    content: none;
  }

  @media screen and (prefers-color-scheme: dark) {
    color: $dark-mode-fg;

    .dropdown-menu,
    .dropdown-item {
      background-color: $dark-mode-bg;
      color: $dark-mode-fg;
    }
    .dropdown-item:hover {
      color: darken($color: $dark-mode-fg, $amount: 24);
    }
  }
}

@media (prefers-color-scheme: dark) {
  .dropdown-menu {
    background-color: #1b1b1b;
    color: $dark-mode-fg;
  }

  .dropdown-item {
    color: $dark-mode-fg;
    background-color: #1b1b1b;
  }
  .dropdown-item:hover {
    color: $dark-mode-fg;
    background-color: $dark-mode-canvas-color;
  }
}

.report-coverage-row {
  td {
    position: relative;
  }
  .report-container {
    .fullscreen-btn {
      position: absolute;
      cursor: pointer;
      top: 0.5rem;
      right: 2rem;
      font-size: 2rem;
      color: $rv-blue;
    }

    &.fullscreen {
      position: fixed;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.9);
      width: 100%;
      height: 100%;
      padding: 2rem;
      z-index: $fullscreen-z-index;
      transition: 0.15s linear;

      .report-wrapper {
        position: relative;
        background-color: #fff;
        padding: 2rem;
        height: 100%;
        overflow: auto;
        border-radius: 0.3rem;
        animation-name: zoom;
        animation-duration: 0.6s;

        .fullscreen-btn {
          position: fixed;
          top: 2rem;
          right: 2.8rem;
        }

        .report-view-box {
          height: calc(100vh - 256px);
        }

        @media screen and (prefers-color-scheme: dark) {
          background-color: $dark-mode-bg;
          th {
            color: $dark-mode-fg;
          }
        }
      }

      .coverage,
      .split-view-container {
        max-width: initial;
      }
    }
  }
}

.introjs-hint.introjs-fixedhint {
  z-index: $fullscreen-z-index + 1;
}

i.fa {
  margin: 0 1ch;
}

.expandable-title {
  transition: 0.3s all;
  padding: 0.3rem 0;

  &:hover {
    cursor: pointer;
    color: $rv-blue;
  }
  &:not(.contract-title) {
    font-weight: normal;
  }
}

.contract-title {
  .contract-coverage {
    float: right;
  }
}

.contract-hint-trigger {
  display: block;
  text-align: center;

  &:hover {
    cursor: pointer;
    color: $rv-yellow;
  }

  .contract-hint-trigger-hidden {
    display: none;
  }
}

.source-name {
  border-bottom: 1px solid $gray;
  font-size: 12px;

  @media screen and (prefers-color-scheme: dark) {
    color: $dark-mode-fg;
    border-color: $dark-mode-border-color;
  }
}

@mixin indent($count) {
  .indent-#{$count} {
    padding-left: #{$count}ch;
  }
}

@include indent(2);

.btn-download-report {
  background-image: url("../img/icons/Firefly-Download-Icon.png");
  &:hover {
    background-image: url("../img/icons/Firefly-Download-Icon-Inverted.png");
  }
}

.btn-copy-report-id {
  font-size: 1rem !important;
  cursor: pointer;
  background-size: cover;
  display: inline-block;
}

@media (min-width: 1025px) {
  #firefly-header:not(.sticky-nav) > .container > .row > .col-12 {
    min-height: 150px;
  }

  .vlmenu {
    & > li:not(:last-child) {
      margin-right: 20px;
    }
    & > li > a {
      padding-bottom: 0;
    }
    li {
      &:hover {
        border-bottom: 2px solid $rv-yellow;
      }
      &.active {
        border-bottom: 2px solid $rv-yellow;
      }
      & > ul {
        z-index: 1;
      }
    }
  }

  #dashboard-submenu {
    position: relative;

    & > ul {
      z-index: 0;
      position: absolute;
      display: flex;
      justify-content: space-between;
      box-shadow: none;
      top: 50px;
      right: 0;
      width: 260px;

      & > li {
        display: inline-block;

        & > a {
          display: inline-block;
          padding: 0;
          &:hover {
            background: none;
            color: black;

            @media screen and (prefers-color-scheme: dark) {
              color: $dark-mode-fg;
            }
          }
        }
      }
    }
  }
}

.breadcrumb {
  background-color: inherit;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: ">" !important;
}

div.table-responsive {
  padding: 0 8px;
}

#youtube-video {
  height: 303.75px;
  width: 540px;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #d7d7d7;
}

video {
  width: 100% !important;
  height: auto !important;
}

.gif:hover {
  opacity: 0.7;
}

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: $rv-blue;
}

.divider-bar-closed {
  background: $rv-blue;
  color: white;

  &:hover {
    background: color.scale($rv-blue, $lightness: -10%);
  }
}

.divider-bar-opened {
  background: $rv-yellow;

  &:hover {
    background: color.scale($rv-yellow, $lightness: -10%);
  }
}

.divider-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease-in-out;

  span {
    letter-spacing: 1px;
  }

  @media screen and (prefers-color-scheme: dark) {
    background: lighten($dark-mode-canvas-color, 2);
    color: $dark-mode-fg;

    &:hover {
      background-color: lighten($color: $dark-mode-canvas-color, $amount: 4);
    }
  }
}

.divider-bar-vertical {
  flex-direction: column;
  width: 1.3rem;

  span {
    writing-mode: vertical-lr;
    text-orientation: sideways;
  }
  i {
    margin: 1ch 0;
  }
}

.divider-bar-horizontal {
  flex-direction: row;
  height: 1.3rem;
}

#contact-links {
  li:hover {
    cursor: pointer;
    border: none !important;
  }
  img {
    height: 1.5rem;
  }
}

#firefly-profile {
  .btn {
    margin: 4px auto;
    padding: 4px 1rem;
  }
}

.icon {
  font-size: 2rem;
  color: $rv-blue;
  transition: 0.2s color;
  &:hover {
    color: $rv-blue-dark;
  }
  &.active {
    color: $rv-yellow;
    &:hover {
      color: $rv-yellow-dark;
    }
  }
}

.introjs-tooltip {
  @media screen and (prefers-color-scheme: dark) {
    background-color: $dark-mode-bg;
  }
}

.introjs-helperLayer {
  @media screen and (prefers-color-scheme: dark) {
    background-color: rgba(65, 65, 65, 0.9);
  }
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
}

#email-modal {
  z-index: 2000;
}

/* Modal Content (Gif) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 1024px;

  @media screen and (prefers-color-scheme: dark) {
    background-color: lighten($dark-mode-bg, 8%);
    color: $dark-mode-fg;
  }
}

video.modal-content {
  margin-top: 100px;
}

/* Caption of Modal*/
#modal-caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
}

/* Add Animation - Zoom in the Modal */
.modal-content,
#modal-caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: $rv-blue;
  font-size: 50px;
  font-weight: bold;
  transition: 0.3s;
  z-index: 99;
}

.close:hover,
.close:focus {
  color: $rv-yellow;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 1024px) {
  .modal-content {
    width: 100%;
  }
}

#firefly-feedback {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;

  & > picture > img {
    width: 100px;
  }
  img {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;

    &:hover {
      opacity: 1;
    }
  }
  .feedback-form {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    background: #fff;
    padding: 24px;
    border-radius: 4px;
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.2);

    .fa-times {
      position: absolute;
      top: 25px;
      right: 25px;
      cursor: pointer;
      opacity: 0.5;
      transition: opacity 0.3s;

      &:hover {
        opacity: 1;
      }
    }
    .feedback-rating {
      display: flex;
      justify-content: space-evenly;

      & > picture > img {
        height: 120px;
        margin: 4px 18px;
      }
    }
    .feedback-message {
      float: left;
      width: 100%;
      margin-top: 10px;
      margin-bottom: 10px;
      overflow: scroll;
      height: 150px;
    }
  }

  @media only screen and (max-width: 767px) {
    .feedback-form {
      position: fixed;
      left: 8px;
      right: 8px;
      bottom: 8px;

      .feedback-rating > picture > img {
        height: 100px;
      }
    }
  }

  @media screen and (prefers-color-scheme: dark) {
    .feedback-form {
      background-color: $dark-mode-bg;
      color: $dark-mode-fg;
    }
  }
}

#contact-links {
  img {
    margin-right: 1rem;
  }
}

#bytecodes,
// #solidity-links,
#solidity-files,
#contract-links {
  margin-bottom: 24px;
}

.drop-area {
  margin-top: 0;
  text-align: center;
  height: 64px;
  border-style: dashed;
  border-color: $gray-darker;
  cursor: pointer;
  margin-bottom: 0;
  background-color: darken($background, 1%);
  &:hover {
    background-color: darken($background, 4%);
  }
  p {
    margin: 0;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
  &.uploader {
    margin-bottom: 0;
  }

  @media screen and (prefers-color-scheme: dark) {
    color: $fg;
    border-color: $dark-mode-gray-darker;
  }
}

.ratings {
  display: inline-block;

  p {
    display: inline-block;
  }

  #positive {
    text-align: left;
  }

  #indifferent {
    text-align: center;
  }

  #negative {
    text-align: right;
  }
}

.feedback-table {
  height: 70%;
}

.color-erc20-green {
  color: $erc20-green !important;
}

.background-color-erc20-green {
  background-color: $erc20-green !important;
}

#erc20-dashboard,
#erc20-bytecode,
#erc20-dev-dashboard {
  .bytecode-row-header {
    h6 a {
      color: $rv-blue;
      text-decoration: underline;

      &:hover {
        color: darken($rv-blue, 8);
      }
    }
  }

  .markdown-preview {
    border: 1px solid $border-color;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 32px;

    pre[class*="language-"] {
      background-color: #f7f8fa;
      font-size: 0.85rem;
      word-break: normal;
      white-space: pre-wrap;
      padding: 16px;
      overflow: auto;
    }

    @media screen and (prefers-color-scheme: dark) {
      color: $dark-mode-gray-light;
      border: 1px solid $dark-mode-border-color;

      pre[class*="language-"] {
        background-color: #1d1f21;
      }
    }
  }

  @media screen and (prefers-color-scheme: dark) {
    color: $dark-mode-fg;

    .table {
      color: $dark-mode-fg;
    }
  }
}

.logo-link {
  color: $fg;
  @media screen and (prefers-color-scheme: dark) {
    color: $dark-mode-fg;
  }
}

pre[class*="language-"],
pre {
  background-color: #f7f8fa;
  font-size: 0.85rem;
  word-break: normal;
  white-space: pre-wrap;
  padding: 16px;
  overflow: auto;
  font-family: Inconsolata, Monaco, Consolas, "Courier New", Courier, monospace;
}
code[class*="language-"] {
  font-family: Inconsolata, Monaco, Consolas, "Courier New", Courier, monospace;
}
pre[class*="language-"] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  border-radius: 0.3em;
}

@media screen and (prefers-color-scheme: dark) {
  pre[class*="language-"],
  pre {
    color: $dark-mode-code-block-fg;
    background-color: #1d1f21;
  }
}

.h1 a,
.h2 a,
.h3 a,
.h4 a,
.h5 a,
.h6 a,
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: $rv-blue;
  &:hover {
    color: $rv-blue-dark;
  }
}

.rv-btn {
  background-color: $white;
  color: $dark;
  border-color: $dark;

  &:hover {
    background-color: darken($white, 5);
    border-color: darken($dark, 5);
  }

  @media screen and (prefers-color-scheme: dark) {
    background-color: $dark;
    color: $white;
    border-color: $white;

    &:hover {
      color: $white;
      background-color: darken($dark, 1);
      border-color: darken($white, 5);
    }
  }
}

.rv-btn-yellow {
  color: $dark;
  background-color: $rv-yellow;
  border-color: $rv-yellow;

  &:hover {
    background-color: darken($rv-yellow, 5);
    border-color: darken($rv-yellow, 5);
  }

  @media screen and (prefers-color-scheme: dark) {
    background-color: $rv-yellow-dark;
    border-color: $rv-yellow-dark;

    &:hover {
      background-color: darken($rv-yellow-dark, 5);
      border-color: darken($rv-yellow-dark, 5);
    }
  }
}

.rv-btn-blue {
  color: $white !important;
  background-color: $rv-blue;
  border-color: $rv-blue;

  &:hover {
    color: $white !important;
    background-color: darken($rv-blue, 5);
    border-color: darken($rv-blue, 5);
  }

  @media screen and (prefers-color-scheme: dark) {
    background-color: $rv-blue-dark;
    border-color: $rv-blue-dark;

    &:hover {
      background-color: darken($rv-blue-dark, 5);
      border-color: darken($rv-blue-dark, 5);
    }
  }
}

.rv-btn-red {
  color: $white !important;
  background-color: $rv-red;
  border-color: $rv-red;

  &:hover {
    color: $white !important;
    background-color: darken($rv-red, 5);
    border-color: darken($rv-red, 5);
  }

  @media screen and (prefers-color-scheme: dark) {
    background-color: $rv-red-dark;
    border-color: $rv-red-dark;

    &:hover {
      background-color: darken($rv-red-dark, 5);
      border-color: darken($rv-red-dark, 5);
    }
  }
}

.rv-btn-green {
  color: $white !important;
  background-color: $erc20-green;
  border-color: $erc20-green;

  &:hover {
    color: $white !important;
    background-color: darken($erc20-green, 5);
    border-color: darken($erc20-green, 5);
  }

  @media screen and (prefers-color-scheme: dark) {
    background-color: $erc20-green-dark;
    border-color: $erc20-green-dark;

    &:hover {
      background-color: darken($erc20-green-dark, 5);
      border-color: darken($erc20-green-dark, 5);
    }
  }
}

.card {
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1);

  &:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
  }

  @media screen and (prefers-color-scheme: dark) {
    background-color: lighten($dark-mode-bg, 8%);
    color: $dark-mode-fg;
    border-color: $dark-mode-border-color;
  }
}

blockquote {
  margin: 16px 0;
  font-size: inherit;
  padding: 0 15px;
  color: #5c5c5c;
  background-color: #f0f0f0;
  border-left: 4px solid #d6d6d6;
}

@media screen and (prefers-color-scheme: dark) {
  blockquote {
    margin: 16px 0;
    font-size: inherit;
    padding: 0 15px;
    color: #fdfdfd;
    background-color: #323232;
    border-left: 4px solid #474747;
  }
}

.page-toc {
  overflow: auto;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  border-right: none;
  background-color: $bg;

  @include media-breakpoint-down(sm) {
    display: none;
    position: fixed;
    z-index: 2000;
    top: 0;
    overflow: auto;
    background-color: #fff;
    height: 100%;
    border: none;
  }

  @media screen and (prefers-color-scheme: dark) {
    background: $dark-mode-bg;
    border-left-color: $dark-mode-border-color;
  }

  .bd-toc-link-wrapper {
    .bd-toc-link {
      display: inline;
      padding: 0.25rem 0;
      white-space: nowrap;
    }

    &.highlighted {
      .bd-toc-link {
        font-weight: 800;
        color: $rv-blue;
      }
    }
  }
}

.page-toc-toggle-btn {
  display: none;
  position: fixed;
  right: 12px;
  bottom: 12px;
  padding: 0;
  width: 48px;
  height: 48px;
  border-radius: 100%;
  font-size: 150%;
  z-index: 3000;

  @include media-breakpoint-down(sm) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
